// import logo from './logo.svg';
import './App.css';
import TodoItem from './TodoItem';

import Test from './Test'
// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         {/* <img src={logo} className="App-logo" alt="logo" /> */}
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           雷后按
//         </a>
//       </header>
//     </div>
//   );
// }

// export default App;
import React, { Fragment } from 'react';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.textInput = React.createRef();
    this.state = {
      inputValue:"",
      todoItems: [
      
      ]
    }

    this.deleteTodoItem = this.deleteTodoItem.bind(this)
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  addTodoItem = () =>{
    // const newTodoItem = {
    //   id:this.state.todoItems.length,
    //   value:this.textInput,
    //   done:false,
    //   delete:false
    // };
    // this.setState({
    //   todoItems:[...this.state.todoItems,this.state.inputValue],
    //   inputValue:""
    // })
    //Es6函数语法
    this.setState((prevState) => ({
      todoItems:[...prevState.todoItems,prevState.inputValue],
      inputValue:""
    }),() => {
      // console.log(this.ul.querySelectorAll('div').length)
    })
  }

  // handleInputChange = (e) =>{
  //   console.log(e.target.value)
  //   this.state.inputValue = e.target.value
  // }

  handleInputChange(e){
    this.setState({
      inputValue:e.target.value
    })
  }

  deleteTodoItem (index){
    this.setState((prevState) => {
      const todoItems = [...prevState.todoItems];
      todoItems.splice(index,1)
      return { todoItems }
    })
  }

  getTodoItem(){
    return this.state.todoItems.map((item,index) => {
      return (
        <TodoItem 
            key={index}
            content={item} 
            index={index}
            deleteTodoItemBtn={this.deleteTodoItem}
        />
      )
    })
  }

  componentWillUnmount(){
  }
  
  shouldComponentUpdate(){
    return true
  }

  componentDidUpdate(){
  }

  
  render(){
    return (
      <Fragment>
      <div>
        {
          //这里是注释
        }
        <h1>todo list</h1>
        <div>
          <label htmlFor="insertArea">输入内容</label>
          <input id="insertArea" className="inputsty" type="text" value={this.state.inputValue} placeholder="添加" 
          onChange={ this.handleInputChange }
          ></input>
          <button type="submit" onClick={this.addTodoItem}>添加</button>
        </div>
        <ul ref={(ul) => {this.ul = ul }}>
          {this.getTodoItem()}
        </ul>
      </div>
      </Fragment>
    )
  }
}

